
<template>
  <el-container>
    <el-aside :width="isCollapse?'64px':'200px'">
      <div class="menuTitle">弹幕后台管理系统</div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          style="border-right: solid 0px"
          v-bind:collapse="isCollapse"
          v-bind:collapse-transition="false"
          v-bind:unique-opened="true"
          :router="true"
          :unique-opened="true">
      >
        <!--弹幕管理菜单-->
        <el-sub-menu index="1">
          <template #title>
           <el-icon><Message /></el-icon>
            <span>弹幕管理</span>
          </template>
          <el-menu-item index="/dashboard/barrage">弹幕管理</el-menu-item>
        </el-sub-menu>
        <!--用户管理菜单-->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/dashboard/user">
            用户管理
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>客户管理</span>
          </template>
          <el-menu-item index="/dashboard/client">
            客户管理
          </el-menu-item>
        </el-sub-menu>
        <!--员工记录管理菜单-->
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Eleme /></el-icon>
            <span>员工记录管理</span>
          </template>
          <el-menu-item index="/dashboard/record">员工记录</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>


    <!--右侧-->
    <el-container class="rightContent">
      <el-header>
        <el-icon class="show" @click="showMenu"><Fold /></el-icon>

        <el-dropdown :hide-on-click="false">
         <span class="el-dropdown-link">
         {{user.name}}
           <el-icon class="el-icon--right"><arrow-down /></el-icon>
         </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!--右侧中部-渲染路由地址所对应的页面组件-->
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>
      <el-footer>@版权所有 2025-2055 云启一部 双体软件产业精英学院</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {doGet} from "../http/httpRequest.js";
import {messageConfirm, messageTip, removeToken} from "../util/Util.js";
import {CreditCard} from "@element-plus/icons-vue";

export default {
  //定义组件名
  name: "DashboardView",
  components: {CreditCard},
  data(){
    return{
      //控制菜单左右的展开和折叠，true是折叠，false是展开
      isCollapse:false,
      //登录用户对象
      user:{},
      //控制仪表盘页面右侧内容是否显示
      isRouterAlive:true
    }
  },
  provide(){
    return{
      reload:()=>{//提供一个箭头函数
        this.isRouterAlive=false;//右侧内容隐藏
        this.$nextTick(function (){
          this.isRouterAlive=true;//当数据更新了，在DOM渲染后，自动执行该函数
        })
      },
    }
  },
  //vue的生命周期中的函数钩子
  mounted() {//页面渲染后，执行该方法
    //加载当前登录用户
    this.loadLoginUser();//不同代码块中调用方法要用this去引用
  },
  updated() {

  },

  methods:{
    //左侧菜单的左右展开和折叠
    showMenu(){
      this.isCollapse=!this.isCollapse;
    },
    //加载当前登录用户
    loadLoginUser(){
      doGet("/api/login/info",{}).then( (resp)=>{
        console.log(resp)
        this.user=resp.data.data;
      })
    },
    //当前用户退出登录
    logout(){
      doGet("/api/logout",{}).then(resp=>{
        if(resp.data.code===200){//退出成功
          //前端需要把sessionStorage/localStorage里面的登录token删掉
          removeToken();
          messageTip("退出成功","success");
          window.location.href="/";
        }else{
          messageConfirm("退出异常，是否强制退出？").then(()=>{
            removeToken();
            //跳转到登录页
            window.location.href="/";
          }).catch(()=>{//用户点击取消按钮会触发
            messageTip("取消强制退出","warning")
          })
        }
      })
    }
  }
}

</script>



<style scoped>
.el-aside{
  background-color: #1a1a1a;
}
.el-header{
  line-height: 35px;
  background-color: azure;
  height: 35px;
}
.el-footer{
  background-color: #535bf2;
  height: 35px;
  text-align: center;
  line-height: 35px;
}
.rightContent{
  height: calc(100vh);
}
.menuTitle{
  height: 35px;
  color: white;
  line-height: 35px;
  text-align: center;
}
.show{
  cursor: pointer;
}
.el-dropdown{
  float:right;
  line-height: 35px;
}

</style>
